<mat-toolbar
	class="spaceBetweenCenter"
	style="padding: 10px 20px;">

	<div style="display: flex; align-items: center;">
		<button (click)="runQuery()"
				*ngIf="!diff"
				[disabled]="!query || query.trim().length < 1"
				color="primary"
				mat-raised-button>
			<span class="material-symbols-outlined notranslate">send</span>
		</button>

		<button
			(click)="runQuery()"
			*ngIf="diff"
			color="primary"
			mat-raised-button>
			<span class="material-symbols-outlined notranslate">difference</span>
		</button>

		<div style="width: 12px"></div>

		<button
			(click)="formatQuery()"
			mat-icon-button
			matTooltip="Format query">
			<span class="material-symbols-outlined notranslate">format_indent_increase</span>
		</button>

		<button
			*ngIf="selectedTable"
			[matMenuTriggerFor]="templatesMenu"
			mat-icon-button
			matTooltip="Prebuilds queries">
			<span class="material-symbols-outlined notranslate">factory</span>
		</button>
		<mat-menu #templatesMenu="matMenu" xPosition="before">
			<button (click)="loadTemplate(template)"
					*ngFor="let template of Object.keys(this.selectedServer!.driver.queryTemplates)"
					mat-menu-item>
				{{ template }}
			</button>
		</mat-menu>

		<button
			(click)="diff = !diff; query2 = query;"
			[class.mat-raised-button]="diff"
			mat-icon-button
			matTooltip="Compare mode">
			<span class="material-symbols-outlined notranslate">splitscreen_left</span>
		</button>

		<a [href]="selectedServer!.driver.docs.language"
		   [matTooltip]='(selectedServer!.driver.language.id === "sql" ? "SQL" : (selectedServer!.driver.language.id | titlecase)) + " References"'
		   mat-icon-button
		   target="_blank">
			<span class="material-symbols-outlined notranslate">developer_guide</span>
		</a>

		<button
			(click)="setAutoUp()"
			[class.mat-raised-button]="autoUp"
			mat-icon-button
			matTooltip="Reload data periodically">
			<span class="material-symbols-outlined notranslate">
				repeat_one
			</span>
		</button>

		<button
			(click)="editView()"
			*ngIf="selectedTable?.view"
			mat-icon-button
			matTooltip="Edit view">
			<span class="material-symbols-outlined notranslate">table_view</span>
		</button>

		<input #inputFile (change)="inputChange($event)" accept=".{{selectedServer!.driver.language.extension}}"
			   hidden="true"
			   onclick="this.value=null" type="file"/>

		<button [matMenuTriggerFor]="advanced" mat-icon-button>
			<span class="material-symbols-outlined notranslate">
				more_vert
			</span>
		</button>
		<mat-menu #advanced="matMenu" xPosition="before">
			<button (click)="inputFile.click()" mat-menu-item>Load query from file</button>
			<button (click)="saveToDisk()" mat-menu-item>Save query to file</button>
			<button (click)="addView()" *ngIf="!selectedTable?.view" [disabled]="!isQuerySelect()" mat-menu-item>
				Create view from query
			</button>
			<button [matMenuTriggerFor]="disclaimer" mat-menu-item>Disclaimer</button>
		</mat-menu>
		<mat-menu #disclaimer="matMenu">
			<ul style="color: white; margin: 0; padding: 0px 22px; font-size: 12px;">
				<li>
					<pre>Only most keyword/function are proposed in autocomplete</pre>
				</li>
				<li>
					<pre>Autocomplete cannot ensure 100% accuracy</pre>
				</li>
			</ul>
		</mat-menu>
	</div>

	<a (click)="request.reloadServer()"
	   *ngIf="reloadDb"
	   mat-flat-button>
		Reload database
	</a>

	<div style="display: flex; align-items: center">
		<mat-form-field *ngIf="querySize >= 1" appearance="outline" class="goToPage">
			<mat-label>
				Page
			</mat-label>

			<input
				#input
				(change)="page = +input.value; runQuery()"
				*ngIf="querySize >= 100000"
				[max]="querySize"
				[value]="page"
				matInput
				min="0"
				type="number">
			<mat-select
				(selectionChange)="page = $event.value; runQuery()"
				*ngIf="querySize < 100000"
				[value]="page">
				<mat-option
					*ngFor="let item of [].constructor(Math.floor(querySize / pageSize) + 1); let i = index"
					[value]="i">{{ i }}
				</mat-option>
			</mat-select>
		</mat-form-field>

		<mat-paginator
			(page)="page = $event.pageIndex; pageSize = $event.pageSize; runQuery()"
			[length]="querySize"
			[pageIndex]="page"
			[pageSizeOptions]="[50, 200, 500, 2000]"
		></mat-paginator>

		<button
			(click)="exportResult()"
			[disabled]="!dataSource || dataSource.data.length < 2"
			mat-icon-button
			matTooltip="Export all results">
			<span class="material-symbols-outlined notranslate">export_notes</span>
		</button>
	</div>
</mat-toolbar>

<mat-progress-bar
	[hidden]="!isLoading"
	mode="query"
	style="position: absolute; left: 0px; right: 0px; z-index: 10000000">
</mat-progress-bar>

<div id="container" [class.diff]="diff">

	<ngx-monaco-editor
		(onInit)="initEditor($event, 0)"
		[(ngModel)]="query"
		[options]="editorOptions">
	</ngx-monaco-editor>

	<ngx-monaco-editor
		(onInit)="initEditor($event, 1)"
		[(ngModel)]="query2"
		[hidden]="!diff"
		[options]="editorOptions">
	</ngx-monaco-editor>

	<div *ngIf="!diff && dataSource?.data && dataSource!.data!.length > 0" id="results">
		<table [dataSource]="dataSource!" class="table" mat-table range-selection>
			<ng-container
				*ngFor="let column of displayedColumns"
				matColumnDef="{{column}}"
			>
				<th *matHeaderCellDef
					[style.min-width]="column.length * 8 + 'px'"
					class="resizeColumn"
					mat-header-cell>
					{{ column }}
				</th>
				<td *matCellDef="let row" mat-cell>
					<app-cell
						[column]="column"
						[stringify]="stringify"
						[value]="row[column]"
					></app-cell>
				</td>
			</ng-container>

			<tr *matHeaderRowDef="displayedColumns!; sticky: true" mat-header-row></tr>
			<tr *matRowDef="let row; columns: displayedColumns!;" mat-row></tr>
		</table>
	</div>
</div>

<div *ngIf="diff && !isLoading" style="border-top: 2px solid #444444; position: relative;">
	<ngx-monaco-diff-editor
		[modifiedModel]="modifiedResult"
		[options]="diffOptions"
		[originalModel]="originalResult"
	></ngx-monaco-diff-editor>
</div>
